<template>
	<cl-page statusBarBackground="#fff" background-color="#F1F1F1" :fullscreen="true">
		<cl-sticky>
			<cl-topbar :border="false" background-color="#fff" color="#333" :title="t('user.driving.driving')"
				:moreTit="t('user.driving.add')" :withMp="true" @more="more" />
		</cl-sticky>
		<view class="page-info animate__animated animate__fadeIn">
			<view class="card">
				<view class="flex align-center flex-between">
					<view class="flex align-center">
						<image class="icon" src="/static/images/fxp.png" mode="aspectFill"></image>
						<view class="name">{{ $t("user.driving.driving") }}</view>
					</view>
					<view class="username">{{ $t("user.driving.username") }}</view>
				</view>
				<view>
					<view class="t1">{{ $t("user.driving.num") }}</view>
					<view class="t2">110001 19910905 3888</view>
				</view>
				<view class="flex flex-between align-end">
					<view>
						<view class="t1">{{ $t("user.driving.no") }}</view>
						<view class="t2">1100 3040 8086</view>
					</view>
					<view class="flex align-center" @click="router.push('/pages/user/drivingLicense/detail')">
						<view class="detail">{{ $t("user.driving.detail") }}</view>
						<cl-icon name="arrow-right" color="#fff" size="34rpx"></cl-icon>
					</view>
				</view>
			</view>
			<view class="option">
				<view class="flex flex-between align-center edit" @click="more">
					<view> {{ $t("user.driving.edit") }} </view>
					<cl-icon name="arrow-right" color="#999" size="34rpx"></cl-icon>
				</view>
				<view class="edit" @click="del">{{ $t("user.driving.del") }}</view>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const { t } = useI18n();
const { router, upload } = useCool();
const { user } = useStore();
const ui = useUi();
const app = useApp();

const more = () => {
	router.push("/pages/user/drivingLicense/edit?id=1");
};
const del = () => {
	ui.showConfirm({
		title: "确定要删除该驾驶证吗？",
	});
};
</script>

<style lang="scss" scoped>
.page-info {
	padding: 30rpx;

	.card {
		width: 690rpx;
		height: 380rpx;
		// background: linear-gradient(135deg, #182c81 0%, #1d33aa 100%);
		background-image: url("/static/images/cardbg.png");
		background-size: 100% 100%;
		border-radius: 20rpx;
		padding: 40rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 2;
		box-shadow: 0 0.3125rem 0.625rem 0 rgba(170, 170, 170, 0.5);

		.icon {
			width: 35rpx;
			height: 35rpx;
			margin-right: 10rpx;
		}

		.name {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #ffffff;
		}

		.username {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #82a2c6;
		}

		.t1 {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #8398c5;
			margin-top: 48rpx;
		}

		.t2 {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			margin-top: 10rpx;
		}

		.detail {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #ffffff;
		}
	}

	.option {
		width: 650rpx;
		height: 260rpx;
		background: #ffffff;
		border-radius: 20rpx;
		position: relative;
		top: -20rpx;
		left: 50%;
		margin-left: -325rpx;
		padding: 20rpx 60rpx 0;
		box-sizing: border-box;

		.edit {
			height: 120rpx;
			border-bottom: 1rpx solid #e5e5e5;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			line-height: 120rpx;
		}
	}
}
</style>
